<template>
  <el-container>
    <el-row class="wrap" v-loading="loading" element-loading-text="拼命加载中">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/dashboard' }"><span style="color: #837e7c;font-weight: normal;">首页</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #837e7c;font-weight: normal;">AI外呼</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #5d9cec;">通话记录</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24" class="wrap-main">
        <!--工具栏-->
        <el-col :span="24" class="gg-toolBar-wrap">
          <el-col :span="24" class="toolbar gg-toolBar">
            <el-form :inline="true" :model="formInline">
              <el-form-item>
                <el-button-group>
                  <el-button size="small" type="primary">今天</el-button>
                  <el-button size="small">昨天</el-button>
                  <el-button size="small">7天</el-button>
                  <el-button size="small">30天</el-button>
                </el-button-group>
              </el-form-item>
              <el-form-item>
                <el-select size="small" v-model="formInline.likeLevel" placeholder="请选择意向度" style="width:140px;">
                  <el-option label="A级(强烈意向)" value="1"></el-option>
                  <el-option label="B级(一般意向)" value="2"></el-option>
                  <el-option label="C级(跟进客户)" value="3"></el-option>
                  <el-option label="D级(无意向)" value="4"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="taskStartDate">
                <el-date-picker size="small" type="date" placeholder="请选择开始时间" v-model="formInline.taskStartDate" style="width:152px;"
                                @keyup.enter.native="handleSearch"></el-date-picker>
              </el-form-item>
              <el-form-item prop="taskEndDate">
                <el-date-picker size="small" type="date" placeholder="请选择结束时间" v-model="formInline.taskEndDate" style="width:152px;"
                                @keyup.enter.native="handleSearch"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-input size="small" v-model="formInline.callNumber" placeholder="请输入被叫号码" style="width:150px;"
                          @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input size="small" v-model="formInline.taskName" placeholder="输入任务名称" style="width:150px;"
                          @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <!--表格区域-->
        <el-col :span="24" class="gg-tableMainWrap">
          <!--表格-->
          <el-row class="gg-tableWrap">
            <el-table :data="tableData" border highlight-current-row style="width: 100%;">
              <el-table-column prop="callType" label="呼叫类型">
              </el-table-column>
              <el-table-column prop="selfCallNum" label="主叫号码">
              </el-table-column>
              <el-table-column prop="otherCallNum" label="被叫号码">
              </el-table-column>
              <el-table-column prop="likeLevel" label="客户意向等级">
              </el-table-column>
              <el-table-column prop="taskName" label="任务名称">
              </el-table-column>
              <el-table-column prop="callDate" label="拨打时间" width="180" sortable>
              </el-table-column>
              <el-table-column prop="callTime" label="通话时长">
              </el-table-column>
              <el-table-column prop="callStatus" label="呼叫状态" width="80">
                <template slot-scope="scope">
                  <el-tag :color="scope.row.statusValue|statusFilter">{{ scope.row.callStatus }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" type="success"  @click="openDetail()">详情</el-button>
                  <el-button size="mini" type="danger" @click="remove(scope.$index,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>

          <!--分页插件-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50,100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              style="float:right;">
            </el-pagination>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
  export default {
    name: "CallTaskList",
    filters: {
      statusFilter(color) {
        const statusMap = {
          success:'#04c18d',
          failed:'#e6a23c',
        };
        return statusMap[color]
      }
    },
    data() {
      return {
        total: 0,
        page: 1,
        limit: 10,
        loading: false,
        currentPage: 1,
        formInline: {
          taskName: '',
          taskStartDate: '',
          taskEndDate:'',
          likeLevel: '',
          callNumber:''
        },
        tableData: [{
          callType: '外呼',
          selfCallNum: '4022000001',
          otherCallNum: '15652528248',
          likeLevel:'A',
          taskName:'催收',
          callDate:'2018-09-01 16:09:40',
          callTime:'00:00:39',
          callStatus:'成功',
          statusValue:'success'
        }, {
            callType: '外呼',
            selfCallNum: '4022000001',
            otherCallNum: '15652528248',
            likeLevel:'D',
            taskName:'催收',
            callDate:'2018-09-01 16:09:40',
            callTime:'00:00:39',
            callStatus:'失败',
            statusValue:'failed'
          }
        ]
      }
    },
    rules:{
      taskStartDate: [
        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      ],
    },
    methods: {
      remove:function(index,row){
        let that = this;
        this.$confirm('确定要删除该条记录吗?','操作提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:"warning"
        }).then(()=>{
          this.$message({
            type:'success',
            message:'删除成功!',
          })
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消删除'
          })
        })
      },
      openDetail:function(){
        let that = this;
        that.$router.push({name:'CallDetail'})
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleSearch() {
        console.log('submit!');
      },
    }
  }
</script>

<style scoped>
  .el-tag {
    padding: 0px 8px;
    height: 25px;
    line-height: 25px;
    font-size: 11px;
    color: #fff;
    border-radius: 12px;
    box-sizing: border-box;
    border:none;
  }
</style>
